<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>HTML/CSS/JS 在线编辑工具</title>
   	<script src="jquery.min.js"></script>

   	<!-- 基础库：必须，下面的可以根据需求添加-->
    <link rel="stylesheet" href="codemirror-5.54.0/lib/codemirror.css">
    <script src="codemirror-5.54.0/lib/codemirror.js"></script>
    
	<!-- 引入 html,css,js,xml 语法高亮文件 -->
	<script src="codemirror-5.54.0/mode/htmlmixed/htmlmixed.js"></script>
	<script src="codemirror-5.54.0/mode/css/css.js"></script>
	<script src="codemirror-5.54.0/mode/javascript/javascript.js"></script>
	<script src="codemirror-5.54.0/mode/xml/xml.js"></script>

	<!--引入css文件，用以支持主题-->
	<link rel="stylesheet" href="codemirror-5.54.0/theme/monokai.css"/>

	<!-- <script src="codemirror-5.54.0/addon/mode/simple.js"></script> -->

	<!-- 自动生成闭合标签和括号 -->
	<script src="codemirror-5.54.0/addon/edit/closetag.js"></script>
	<script src="codemirror-5.54.0/addon/edit/closebrackets.js"></script>
	  <!--[if lt IE 9]>
	  <script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	  <![endif]-->

	<!-- 生成提示语 -->
	<script src="codemirror-5.54.0/addon/display/placeholder.js"></script> 

	<!-- 代码折叠功能等 -->
	<link rel="stylesheet" href="codemirror-5.54.0/addon/fold/foldgutter.css"/>
	<script src="codemirror-5.54.0/addon/fold/foldcode.js"></script>
	<script src="codemirror-5.54.0/addon/fold/foldgutter.js"></script>
	<script src="codemirror-5.54.0/addon/fold/brace-fold.js"></script>
	<script src="codemirror-5.54.0/addon/fold/comment-fold.js"></script>
</head>

<body>
<style>
.container{ position: relative; width: 100%;height: 600px; }
.container>div{ width: 49%; height: 49%; position: absolute;  border:1px solid #aaa;}
.div1{ top:0; left: 0; }
.div2{ bottom:0; left: 0; }
.div3{ top:0; right: 0; }
.div4{ bottom:0; right: 0; }
</style>

<button type="button" class="btn btn-success" onclick="submitTryit()">运行</button>
<div class="container">
	<div class="div1">
		<textarea placeholder="输入 HTML 代码……" id="code-html" name="code" rows="11"></textarea>
	</div>
	<div class="div2">
		<textarea placeholder="输入 JavaScript 代码……" id="code-js" name="code" rows="10"></textarea>
	</div>
	<div class="div3">
		<textarea placeholder="输入 CSS 代码……" id="code-css" rows="11"></textarea>
	</div>
	<div class="div4">
		<div id="output"></div>
	</div>	
</div>

<script type="text/javascript">
//配置项
var cm_opt = {
	mode: 'text/html',    //语法高亮模式
	// theme: "monokai",  //设置主题(确定引入了相关主题的css文件)
	lineNumbers: true,    //显示行号
	lineWrapping: true,   //代码折叠
	smartIndent:false,    //关闭自动缩进
	indentUnit: 2,        //自动缩进2格
	tabSize:2,            //缩进
	undoDepth: 1000,      //最大撤消次数，默认为200（包括选中内容改变事件） 。
	lineWrapping:false,   //长文本不换行
	selectionPointer: true,
	matchBrackets: true,
	indentWithTabs: true,
	// gutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
	foldGutter: true,      // 启用行槽中的代码折叠
	autofocus: true,       // 自动聚焦
	matchBrackets: true,   //	括号匹配
	autoCloseTags:true,    //	自动生成html关闭标签
	autoCloseBrackets:true,// 自动生成双括号
	//readOnly: true,      //	只读
	styleActiveLine: true, // 显示选中行的样式  
};

// HTML
var html_box = document.querySelector('#code-html');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);

// CSS
cm_opt.mode = 'css';
var css_box = document.querySelector('#code-css');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);

// JAVASCRIPT
cm_opt.mode = 'javascript';
var js_box = document.querySelector('#code-js');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
		
  	
// editor.setSize('800px', '950px');     //设置代码框的长宽
// editor.setValue("");    //给代码框赋值
// editor.getValue();    //获取代码框的值
// editor.setOption("readOnly", true); 


$("#basehtml").click(function() {
	_html_code = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>文档标题</title>\n</head>\n<body>\n\t<h1>我的第一个HTML页面</h1>\n\t<p>我的第一个段落。</p>\n</body>\n</html>\n";
	html_editor.getDoc().setValue(_html_code);
});


html_editor.setSize('100%','100%');
js_editor.setSize('100%', '100%');
css_editor.setSize('100%','100%');
   

function submitTryit() {
	// 基础模板
	var html = html_editor.getValue(),
	css = css_editor.getValue(),
	js = js_editor.getValue(),
	src = html;

	if (html) {
		var patternHtmlTag = /<html([^>]*)>/im;
		var array_matches_html_tag = patternHtmlTag.exec(src);
		if (array_matches_html_tag) {
			src = src.replace('<html>', '<html ' + array_matches_html_tag[1] + '>');
		}
		var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
		var array_matches_head = patternHead.exec(src);

		var patternBodyTag = /<body([^>]*)>/im;
		var array_matches_body_tag = patternBodyTag.exec(src);
		if (array_matches_body_tag) {
			src = src.replace('<body>', '<body ' + array_matches_body_tag[1] + '>');
		} 
	} 
	//console.log(css);
	if (css.indexOf('<style>') !== -1) {
		$(".alert-danger span").text('CSS 编辑框不需要 <style> 标签');
		$(".alert-danger").show().delay(5000).fadeOut();
		return;
	} else if (js.indexOf('<script>') !== -1) {
		$(".alert-danger span").text('JavaScript 编辑框不需要 <script> 标签');
		$(".alert-danger").show().delay(5000).fadeOut();
		return;
	} else {
		$(".alert-danger").hide();
	}

	// CSS
    if(css) {
		css = '<style>' + css + '</style>';
		if (array_matches_head) {
			src = src.replace('</head>', css + '</head>');
		} else if (array_matches_body_tag) {
			src = src.replace('</body>', css + '</body>');
		} else {
			src +=  css;
		}
	}

	// Javascript
	if(js) {
		js = '<script>' + js + '<\/script>';
		if (array_matches_body_tag) {
			src = src.replace('</body>', js + '</body>');
		}else {
			src +=  js;
		}
	}

	text = src;
	var ifr = document.createElement("iframe");
	ifr.setAttribute("frameborder", "0");
	ifr.setAttribute("id", "iframeResult");
	document.getElementById("output").innerHTML = "";
	document.getElementById("output").appendChild(ifr);

	var ifrw = (ifr.contentWindow) ? ifr.contentWindow: (ifr.contentDocument.document) ? ifr.contentDocument.document: ifr.contentDocument;
	ifrw.document.open();
	ifrw.document.write(text);
	ifrw.document.close();
	autodivheight();
}

submitTryit();
window.addEventListener("resize", autodivheight);
function autodivheight(){
    var winHeight=0;
    if (window.innerHeight) {
        winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
    }
    //通过深入Document内部对body进行检测，获取浏览器窗口高度
    if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
    }
    height = height = (winHeight - 60) * 0.86;
    // document.getElementById("splitContainer").style.height= height +"px";
}
</script>
</body>
</html>
